/**
 * 在其他项目中使用弹幕组件的示例
 * 展示如何不修改App.tsx而直接使用
 */

import React from 'react'
import { BarrageDemoApp } from './BarrageDemoApp'

/**
 * 示例1: 完整替换App组件
 * 如果整个应用就是弹幕演示，可以直接替换
 */
export const FullBarrageApp: React.FC = () => {
  return <BarrageDemoApp />
}

/**
 * 示例2: 嵌入到现有应用中
 * 在现有应用中添加弹幕功能
 */
export const EmbeddedBarrageApp: React.FC = () => {
  return (
    <div>
      {/* 现有的应用头部 */}
      <header style={{ 
        padding: '20px', 
        backgroundColor: '#f8f9fa', 
        textAlign: 'center',
        borderBottom: '1px solid #dee2e6'
      }}>
        <h1>我的应用</h1>
        <nav>
          <a href="#home" style={{ margin: '0 15px' }}>首页</a>
          <a href="#about" style={{ margin: '0 15px' }}>关于</a>
          <a href="#barrage" style={{ margin: '0 15px' }}>弹幕演示</a>
        </nav>
      </header>

      {/* 主要内容区域 */}
      <main>
        {/* 嵌入弹幕组件 - 无需任何配置 */}
        <BarrageDemoApp />
      </main>

      {/* 现有的应用尾部 */}
      <footer style={{ 
        padding: '20px', 
        backgroundColor: '#f8f9fa', 
        textAlign: 'center',
        borderTop: '1px solid #dee2e6',
        marginTop: '40px'
      }}>
        <p>&copy; 2024 我的应用. 集成了高性能弹幕系统</p>
      </footer>
    </div>
  )
}

/**
 * 示例3: 作为页面的一部分
 * 在多页面应用中的某个页面使用
 */
export const BarragePage: React.FC = () => {
  return (
    <div style={{ minHeight: '100vh', backgroundColor: '#f5f5f5' }}>
      {/* 页面标题 */}
      <div style={{ 
        padding: '30px 20px', 
        textAlign: 'center', 
        backgroundColor: 'white',
        boxShadow: '0 2px 4px rgba(0,0,0,0.1)'
      }}>
        <h1 style={{ margin: 0, color: '#333' }}>弹幕视频演示</h1>
        <p style={{ margin: '10px 0 0 0', color: '#666' }}>
          体验高性能弹幕系统，支持AI人体检测和智能避让
        </p>
      </div>

      {/* 弹幕组件 */}
      <BarrageDemoApp />

      {/* 额外说明 */}
      <div style={{ 
        maxWidth: '1200px', 
        margin: '0 auto', 
        padding: '40px 20px',
        textAlign: 'center'
      }}>
        <h2 style={{ color: '#333', marginBottom: '20px' }}>技术特性</h2>
        <div style={{ 
          display: 'grid', 
          gridTemplateColumns: 'repeat(auto-fit, minmax(250px, 1fr))', 
          gap: '20px' 
        }}>
          <div style={{ 
            padding: '20px', 
            backgroundColor: 'white', 
            borderRadius: '8px',
            boxShadow: '0 2px 8px rgba(0,0,0,0.1)'
          }}>
            <h3>🚀 高性能渲染</h3>
            <p>基于Canvas的高效弹幕渲染引擎，支持大量弹幕同时显示</p>
          </div>
          <div style={{ 
            padding: '20px', 
            backgroundColor: 'white', 
            borderRadius: '8px',
            boxShadow: '0 2px 8px rgba(0,0,0,0.1)'
          }}>
            <h3>🤖 AI智能避让</h3>
            <p>集成MediaPipe人体检测，弹幕自动避开视频中的人物</p>
          </div>
          <div style={{ 
            padding: '20px', 
            backgroundColor: 'white', 
            borderRadius: '8px',
            boxShadow: '0 2px 8px rgba(0,0,0,0.1)'
          }}>
            <h3>📦 开箱即用</h3>
            <p>完全自包含组件，无需修改项目配置，一行代码即可使用</p>
          </div>
        </div>
      </div>
    </div>
  )
}

/**
 * 示例4: 带路由的多页面应用
 * 展示如何在路由应用中使用
 */
export const RouterBarrageApp: React.FC = () => {
  const [currentPage, setCurrentPage] = React.useState<'home' | 'barrage' | 'about'>('home')

  const renderPage = () => {
    switch (currentPage) {
      case 'home':
        return (
          <div style={{ padding: '40px', textAlign: 'center' }}>
            <h2>欢迎来到我的应用</h2>
            <p>这是一个集成了弹幕系统的演示应用</p>
            <button 
              onClick={() => setCurrentPage('barrage')}
              style={{ 
                padding: '12px 24px', 
                fontSize: '16px', 
                backgroundColor: '#007bff', 
                color: 'white', 
                border: 'none', 
                borderRadius: '6px',
                cursor: 'pointer'
              }}
            >
              体验弹幕系统
            </button>
          </div>
        )
      case 'barrage':
        return <BarrageDemoApp />
      case 'about':
        return (
          <div style={{ padding: '40px', textAlign: 'center' }}>
            <h2>关于弹幕系统</h2>
            <p>这是一个基于React和TypeScript的高性能弹幕组件库</p>
          </div>
        )
      default:
        return null
    }
  }

  return (
    <div>
      {/* 导航栏 */}
      <nav style={{ 
        padding: '15px', 
        backgroundColor: '#343a40', 
        display: 'flex', 
        justifyContent: 'center',
        gap: '20px'
      }}>
        {(['home', 'barrage', 'about'] as const).map(page => (
          <button
            key={page}
            onClick={() => setCurrentPage(page)}
            style={{
              padding: '8px 16px',
              backgroundColor: currentPage === page ? '#007bff' : 'transparent',
              color: 'white',
              border: '1px solid #007bff',
              borderRadius: '4px',
              cursor: 'pointer'
            }}
          >
            {page === 'home' ? '首页' : page === 'barrage' ? '弹幕演示' : '关于'}
          </button>
        ))}
      </nav>

      {/* 页面内容 */}
      {renderPage()}
    </div>
  )
}

// 默认导出最常用的嵌入式示例
export default EmbeddedBarrageApp
